<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="set">设置cookie</button>
    <button class="get">获取cookie</button>
</body>
<script>

    // 如何存储cookie?  (对应键名存储,没有就新增,有就修改)
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回
    // (4) cookie可以设置过期时间,和存储路径

    // 如何获取cookie
    // (1) cookie的存/取 都依赖于document.cookie
    // (2) cookie也是以键值对形式存在的字符串(key=value)
    // (3) cookie存储时, 是一条一条存储的, 取的时候是将所有cookie整合到一整个字符串中返回,每条数据之间用"; "分隔
    // (4) cookie可以设置过期时间,和存储路径


    var setBtn = document.getElementsByClassName("set")[0];
    var getBtn = document.getElementsByClassName("get")[0];
   


    setBtn.onclick = function(){
        console.log("存储cookie");


        var date = new Date(); 
        date.setDate(date.getDate() + 7);  // 7天后过期

        //  7天后过期  cookie存储在 /day25
        // document.cookie = "user=a123123; expires=" + date.toUTCString() + "; path=/day25";
        // document.cookie = "pwd=123123; expires=" + date.toUTCString() + "; path=/day25";
        // document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/day25";
        // document.cookie = "email=123123@qq.com; expires=" + date.toUTCString() + "; path=/day25";

         //  7天后过期  cookie存储在站点根目录下 /
         document.cookie = "user=a123123; expires=" + date.toUTCString() + "; path=/";
        document.cookie = "pwd=123123; expires=" + date.toUTCString() + "; path=/";
        document.cookie = "phone=17386141517;expires=" + date.toUTCString() + "; path=/";
        document.cookie = "email=123123@qq.com; expires=" + date.toUTCString() + "; path=/";

    }

    getBtn.onclick = function(){
        console.log(document.cookie); // "user=a123123; pwd=123123; phone=17386141517; email=123123@qq.com"

        // 获取cookie 将其解析为对象数据
        // (1) 手动拆分解析
        // var cookie = document.cookie;
        // var obj = {};
        // if(cookie){
        //     var list = cookie.split("; ");
        //     console.log(list);  //  ['user=a123123', 'pwd=123123', 'phone=17386141517', 'email=123123@qq.com']
        //     for(var i = 0;i<list.length;i++){
        //         var item = list[i];  // 'user=a123123'
        //         var name = item.split("=")[0];
        //         var val = item.split("=")[1];
        //         obj[name] = val;
        //     }
        // }
        // console.log(obj);

        var cookie = document.cookie;
        var obj = {};

        if(cookie){
            var reg = /(\w+)=([^;\s]+)/g;
            var result = null;
            while(result = reg.exec(cookie)){
                console.log(result);
                var name = result[1];
                var val = result[2];
                obj[name] = val;
            }
        }
        console.log(obj);

    }


    // cookie封装
    // setCookie(key,val,expires,path="/")  设置cookie
    // expires 不传参,浏览器关闭过期
    //          传参, 指定时间后过期  (单位: day  s)

    // getCookie(key)    
</script>
</html>